<template>
    <el-dialog width="400" :model-value="modelValue" title="登录你的信息!" @close="cancelHandle">
        <el-form ref="ruleFormRef" :model="form" :rules="rules">
            <el-form-item label="姓名" prop="user_name" label-width="100px">
                <el-input v-model="form.user_name" placeholder="请输入姓名!" autocomplete="off" />
            </el-form-item>
            <el-form-item label="班级" prop="department" label-width="100px">
                <el-select v-model="form.department" placeholder="请选择班级!">
                    <el-option v-for="item in form.departmentList" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelHandle">关闭</el-button>
                <el-button type="primary" @click="confirmHandle(ruleFormRef)">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { PropType } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {getDepartmentApi, loginApi, getUserInfoApi } from '@/api/index.js'

const props = defineProps({
    modelValue:{
        type: Boolean as PropType<boolean>,
        required: true
    },
    getClockInfo:{// 登录成功获取打卡信息
        type:Function
    }
})

const emits = defineEmits(['update:modelValue'])

// 表单元素
const ruleFormRef = ref<FormInstance>()

interface Form {
  user_name: string;
  department: string;
  departmentList: DepartmentList[];
}

interface DepartmentList {
  id: number;
  name: string;
}
// 表单数据
const form = reactive<Form>({
  user_name: '',//姓名
  department: '',//班级
  departmentList:[],//班级列表
})

//表单校验规则
const rules = reactive<FormRules>({
    user_name:[{ required: true, message: '请输入姓名!' }],
    department:[{ required: true, message: '请选择班级!' }],
})

// 关闭弹窗
const cancelHandle = () => {
    emits('update:modelValue',false)
    resetForm()
}

// 清除表单数据
const resetForm = () => {
  if (!ruleFormRef) return
  ruleFormRef.value?.resetFields()
}

// 提交表单
const confirmHandle = async(formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            const {user_name,department,departmentList} = form
            const department_id = departmentList.filter(item=>item.name===department)[0].id//班级id
            // 1.调用登录接口 判断数据库有无此用户，没有则创建，有不做创建
            loginApi({user_name,department_id}).then((res:any)=>{
                // 获取用户信息
                getUserInfoApi({user_name,department_id}).then((res:any)=>{
                    // 2.存入本地缓存
                    localStorage.setItem('userInfo',JSON.stringify({user_name,user_id:res.data[0].id,department,department_id}))
                    // 3.获取打卡信息
                    props.getClockInfo && props.getClockInfo()
                })
            })
            
            cancelHandle()
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(()=>{
    console.log(props.modelValue);
    // 获取班级
    getDepartmentApi().then((res:any)=>{
        console.log(res);
        form.departmentList = res.data
        console.log(form.departmentList);
        
    })
})
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>